import { reactive, ref } from 'vue';
import { cloneDeep } from 'lodash';
import { IFormParams, ICreateOrEditParams, IPoster } from './interface';
/**
 * @description 步骤条的索引
 */
export const stepValue = ref(0);

/** 默认的form参数, 具体的参数的注释看interface文件 */
const defaultFormParams: IFormParams = {
    poster_type: 0, //0: 默认海报,1: 海报库， 2: 本地上传
    poster_id: undefined, //海报库中海报id
    absolute_url: 'https://static.scrm.keyid.cn/assets/images/web-pc/default-groupfission-poster.png', //海报图片url
    avatar_flag: 1, //是否用户头像 1: 打开， 2: 关闭
    avatar_type: 2, //头像展示类型 1: 方形， 2: 圆形
    nickname_flag: 1, //是否用户昵称  1: 打开， 2: 关闭
    nickname_color: '#ffffff', //用户昵称颜色
    nickname_size: 14, //用户昵称字体大小
    desc_flag: 1, //是否描述 1: 打开， 2: 关闭
    desc_color: '#ffffff', //描述颜色
    desc_size: 12, //描述字体大小
    desc: '' //描述内容
};

/**
 * @description 页面渲染表单所需的字段
 */
export const formParams = reactive<IFormParams>(cloneDeep(defaultFormParams));

/** 初始化 formParams */
export const initFormParams = () => {
    // 删除所有的属性，然后在进行深拷贝
    for (const key in formParams) {
        Reflect.deleteProperty(formParams, key);
    }
    Object.assign(formParams, cloneDeep(defaultFormParams));
};

/**
 * 根据formParams转化成后端所需要的字段
 * @returns create/edit 时传给后端的字段
 */
export const getParamsByFormModel = () => {
    const createParams: ICreateOrEditParams = cloneDeep(formParams);

    // 过滤分享海报设置
    createParams.poster = formatPoster(formParams.poster);

    return createParams;
};

/**
 * 过滤海报字段
 * @param poster 海报的配置
 * @returns 过滤完成可以给后端的的海报字段
 */
const formatPoster = (poster: IPoster) => {
    const posterParams = cloneDeep(poster);
    // 本地上传过滤掉海报库id
    if (poster.poster_type === 2) {
        posterParams.poster_id = undefined;
    }

    // 关闭头像时过滤头像的
    if (poster.avatar_flag === 2) {
        posterParams.avatar_type = 1;
    }

    // 关闭昵称时，过滤昵称的
    if (poster.nickname_flag === 2) {
        posterParams.nickname_color = '#ffffff';
        posterParams.nickname_size = 14;
    }

    // 关闭描述时，过滤描述的
    if (poster.desc_flag === 2) {
        posterParams.desc_color = '#ffffff';
        posterParams.desc_size = 14;
        posterParams.desc = '';
    }

    return posterParams;
};

/**
 * 设置formParams的方法。由详情获取过来的做转换
 * @param data 接口返回的data
 */
export const setPosterFormParams = (data: any) => {
    Object.assign(formParams, data);
};
